<template>
	<div class="pg-container">

		<!-- 关闭图标 -->
		<div class="close-icon" @click="handleClose">
			<el-icon><Close /></el-icon>
		</div>

		<!-- 左侧材料区域 -->
		<div class="material-section">
			<div class="section-header">
				<h3>申论材料</h3>
			</div>
			<div class="material-tabs">
				<el-tabs v-model="activeMaterialTab" type="card">
					<el-tab-pane
						v-for="(material, index) in shenlunCailiaos"
						:key="material.id"
						:label="material.title"
						:name="String(material.id)"
					>
						<div class="material-content" v-html="material.content"></div>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>

		<!-- 右侧问题和批改区域 -->
		<div class="question-section">
			<div class="section-header">
				<h3>问题批改</h3>
			</div>
			<div class="question-tabs">
				<el-tabs v-model="activeQuestionTab" type="card">
					<el-tab-pane
						v-for="(question, index) in shenlunQuestions"
						:key="question.id"
						:label="question.title"
						:name="String(question.id)"
					>
						<div class="question-content">
							<div class="question-info">
								<div class="question-title">问题要求：</div>
								<div class="question-remarks" v-html="question.remarks || ''"></div>
							</div>

							<div class="student-answer">
								<div class="answer-title">
									学生答案：
									<el-button
										type="primary"
										size="small"
										class="preview-btn"
										@click="openAnswerPreview(question)"
									>
										<el-icon><ZoomIn /></el-icon>
										预览全文
									</el-button>
								</div>
								<div
									class="answer-content"
									v-html="question.shenlunAnswer?.content || '暂无答案'"
								></div>
							</div>

							<div class="reference-answer">
								<div class="answer-title">
									参考答案：
									<el-button
										type="success"
										size="small"
										class="preview-btn"
										@click="openReferencePreview(question)"
									>
										<el-icon><ZoomIn /></el-icon>
										预览全文
									</el-button>
								</div>
								<div class="answer-content" v-html="question.answer || ''"></div>
							</div>

							<div class="scoring-section">
								<div class="score-title">评分：</div>
								<el-form label-width="80px">
									<el-form-item label="分数">
										<el-input-number
											v-model="scoringForm[String(question.id)].score"
											:min="0"
											:max="question.score || 100"
											:step="1"
											size="large"
										/>
										<span class="max-score">满分：{{ question.score }}</span>
									</el-form-item>
									<el-form-item label="评语">
										<el-input
											type="textarea"
											v-model="scoringForm[String(question.id)].reback"
											:rows="4"
											placeholder="请输入评语"
										/>
									</el-form-item>
								</el-form>
							</div>

							<div class="action-buttons">
								<el-button type="primary" @click="submitScore(question.id)"
									>提交评分</el-button
								>
								<el-button @click="resetScore(question.id)">重置</el-button>
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>

		<!-- 公考同盟广告标识 -->
		<div class="brand-watermark">
			<span>公考同盟</span>
			<span class="brand-slogan">助力你的公考之路</span>
		</div>
		<div @click="handleFinish" class="brand-watermark1">
			<el-icon><Check /></el-icon>
			批改完成
		</div>

		<!-- 答案预览抽屉 -->
		<el-drawer
			v-model="drawerVisible"
			:title="drawerTitle"
			direction="rtl"
			size="60%"
			:destroy-on-close="false"
		>
			<div class="drawer-content" v-html="drawerContent"></div>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { getSlScore, addShenlunAnswer,correctTest } from '../../api/slpg';
import { onMounted, ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { ZoomIn, Close, Check } from '@element-plus/icons-vue';

// 定义类型接口
interface ShenlunAnswer {
	id?: string | number;
	content?: string;
	score?: number;
	reback?: string;
	userId?: string | number;
}

interface ShenlunQuestion {
	id: string | number;
	title: string;
	content?: string;
	remarks?: string;
	answer?: string;
	score?: number;
	shenlunAnswer?: ShenlunAnswer;
}

interface ShenlunCailiao {
	id: string | number;
	title: string;
	content: string;
}

interface ScoringForm {
	[key: string]: {
		score: number;
		reback: string;
		questionId: string | number;
		testId: string;
		userId: string | number;
		shenlunAnswerId: string | number;
	};
}

const shenlunCailiaos = ref<ShenlunCailiao[]>([]);
const shenlunQuestions = ref<ShenlunQuestion[]>([]);
const activeMaterialTab = ref('');
const activeQuestionTab = ref('');
const scoringForm = reactive<ScoringForm>({});

// 抽屉相关状态
const drawerVisible = ref(false);
const drawerTitle = ref('');
const drawerContent = ref('');

const props = defineProps({
	testId: {
		type: String,
		default: ''
	}
});

const emit = defineEmits(['close']);

// 处理关闭事件
const handleClose = () => {
	emit('close');
};

const handleFinish = () => {
	correctTest(props.testId).then((res: any) => {
		if (res.code === 200) {
			ElMessage.success('批改完成');
			emit('close');
		} else {
			ElMessage.error('批改失败');
		}
	});
};

// 打开学生答案预览
const openAnswerPreview = (question: ShenlunQuestion) => {
	drawerTitle.value = `${question.title} - 学生答案预览`;
	drawerContent.value = question.shenlunAnswer?.content || '暂无答案';
	drawerVisible.value = true;
};

// 打开参考答案预览
const openReferencePreview = (question: ShenlunQuestion) => {
	drawerTitle.value = `${question.title} - 参考答案预览`;
	drawerContent.value = question.answer || '';
	drawerVisible.value = true;
};

// 获取测试数据
const getTestScore = async () => {
	try {
		const res = await getSlScore(props.testId);

		// 处理材料数据
		res.data.shenlunCailiaos.forEach((item: ShenlunCailiao, index: number) => {
			item.title = `材料${index + 1}`;
		});
		shenlunCailiaos.value = res.data.shenlunCailiaos;

		// 处理问题数据
		res.data.shenlunQuestions.forEach((item: ShenlunQuestion, index: number) => {
			item.title = `问题${index + 1}`;
			// 初始化评分表单
			scoringForm[String(item.id)] = {
				score: item.shenlunAnswer?.score || 0,
				reback: item.shenlunAnswer?.reback || '',
				questionId: item.id,
				testId: props.testId,
				userId: item.shenlunAnswer?.userId || '',
				shenlunAnswerId: item.shenlunAnswer?.id || ''
			};
		});
		shenlunQuestions.value = res.data.shenlunQuestions;

		// 设置默认选中的标签
		if (shenlunCailiaos.value.length > 0) {
			activeMaterialTab.value = String(shenlunCailiaos.value[0].id);
		}
		if (shenlunQuestions.value.length > 0) {
			activeQuestionTab.value = String(shenlunQuestions.value[0].id);
		}

		console.log('材料数据:', shenlunCailiaos.value);
		console.log('问题数据:', shenlunQuestions.value);
	} catch (error) {
		console.error('获取数据失败:', error);
		ElMessage.error('获取数据失败');
	}
};

// 提交评分
const submitScore = async (questionId: string | number) => {
	try {
		const form = scoringForm[String(questionId)];
		if (!form.score) {
			return ElMessage.warning('请输入分数');
		}
		addShenlunAnswer({
			id: form.shenlunAnswerId,
			score: form.score,
			reback: form.reback
		}).then((res: any) => {
			if (res.code === 200) {
				ElMessage.success('评分提交成功');
			} else {
				ElMessage.error('评分提交失败');
			}
		});

		console.log('提交评分数据:', form);
	} catch (error) {
		console.error('提交评分失败:', error);
		ElMessage.error('提交评分失败');
	}
};

// 重置评分
const resetScore = (questionId: string | number) => {
	const question = shenlunQuestions.value.find(q => q.id === questionId);
	if (question) {
		scoringForm[String(questionId)] = {
			score: question.shenlunAnswer?.score || 0,
			reback: question.shenlunAnswer?.reback || '',
			questionId: question.id,
			testId: props.testId,
			userId: question.shenlunAnswer?.userId || '',
			shenlunAnswerId: question.shenlunAnswer?.id || ''
		};
		ElMessage.info('已重置评分');
	}
};

onMounted(() => {
	setTimeout(() => {
		getTestScore();
	}, 100);
});
</script>

<style lang="scss" scoped>
.pg-container {
	display: flex;
	gap: 20px;
	padding: 10px;
	background-color: #f5f7fa;
}

.material-section,
.question-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.section-header {
	padding: 8px;
	border-bottom: 1px solid #e4e7ed;
	background-color: #f5f7fa;

	h3 {
		margin: 0;
		font-size: 18px;
		color: #303133;
	}
}

.material-tabs,
.question-tabs {
	flex: 1;
	overflow: auto;
	padding: 16px;
}

// 增强tab激活状态的样式
:deep(.el-tabs__item) {
	padding: 0 20px;
	height: 40px;
	line-height: 40px;
	transition: all 0.3s;

	&.is-active {
		background: linear-gradient(135deg, #1e50a2, #4165d7);
		color: #fff;
		border-radius: 4px;
		font-weight: bold;
	}

	&:hover {
		background: linear-gradient(135deg, #ecf5ff, #d0e6ff);
		color: #409eff;
		border-radius: 4px;
	}
}

:deep(.el-tabs__nav) {
	border: none !important;
}

:deep(.el-tabs__item:not(.is-active)) {
	border: 1px solid #dcdfe6;
	margin-right: 4px;
	border-radius: 4px;
}

.material-content,
.question-content {
	overflow: auto;
}

.question-info,
.student-answer,
.reference-answer {
	margin-bottom: 24px;
	padding: 16px;
	border-radius: 4px;
	background-color: #f5f7fa;
}

// 增强批改区域样式
.scoring-section {
	margin-bottom: 24px;
	padding: 20px;
	border-radius: 8px;
	background: linear-gradient(135deg, #eef2ff, #e5ebff);
	border: 2px solid transparent;
	border-image: linear-gradient(135deg, #4165d7, #5b7de2);
	border-image-slice: 1;
	box-shadow: 0 4px 12px rgba(65, 101, 215, 0.2);
	position: relative;

	&::before {
		content: '老师批改';
		position: absolute;
		top: -12px;
		left: 20px;
		background: linear-gradient(135deg, #4165d7, #5b7de2);
		color: #fff;
		padding: 2px 12px;
		border-radius: 4px;
		font-weight: bold;
		font-size: 14px;
	}

	.score-title {
		color: #4165d7;
		font-size: 16px;
	}

	:deep(.el-form-item__label) {
		font-weight: bold;
		color: #333;
	}

	:deep(.el-input-number) {
		.el-input-number__increase,
		.el-input-number__decrease {
			background: linear-gradient(135deg, #4165d7, #5b7de2);
			color: #fff;
			border-color: #4165d7;
		}
	}

	:deep(.el-textarea__inner) {
		border-color: #8ba3e8;
		&:focus {
			border-color: #4165d7;
			box-shadow: 0 0 0 2px rgba(65, 101, 215, 0.2);
		}
	}
}

.question-title,
.answer-title,
.score-title {
	font-weight: bold;
	margin-bottom: 8px;
	color: #303133;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.preview-btn {
	margin-left: auto;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.question-remarks,
.answer-content {
	line-height: 1.6;
	color: #606266;
	max-height: 100px;
	overflow-y: auto;
}

.student-answer {
	background-color: #ecf5ff;
}

.reference-answer {
	background-color: #f0f9eb;
}

.max-score {
	margin-left: 12px;
	color: #4165d7;
	font-weight: bold;
}

.action-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 16px;

	:deep(.el-button--primary) {
		background: linear-gradient(135deg, #4165d7, #5b7de2);
		border-color: #4165d7;

		&:hover,
		&:focus {
			background: linear-gradient(135deg, #3555c4, #4b6dd2);
			border-color: #3555c4;
		}
	}
}

/* 公考同盟广告样式 */
.brand-watermark {
	position: fixed;
	bottom: 30px;
	left: 40px;
	background: linear-gradient(135deg, #4165d7, #5b7de2);
	color: white;
	padding: 8px 16px;
	border-radius: 10px;
	font-weight: bold;
	font-size: 16px;
	box-shadow: 0 2px 8px rgba(65, 101, 215, 0.4);
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 999;
	cursor: pointer;
	transition: all 0.3s ease;

	&:hover {
		transform: translateY(-3px);
		box-shadow: 0 4px 12px rgba(65, 101, 215, 0.6);
		background: linear-gradient(135deg, #3555c4, #4b6dd2);
	}

	.brand-slogan {
		font-size: 12px;
		font-weight: normal;
		margin-top: 2px;
		opacity: 0.9;
	}
}
.brand-watermark1 {
	position: fixed;
	top: 70px;
	right: 200px;
	background: linear-gradient(135deg, #05E82E, #5b7de2);
	color: white;
	padding: 8px 16px;
	border-radius: 10px;
	font-weight: bold;
	font-size: 16px;
	box-shadow: 0 2px 8px rgba(65, 101, 215, 0.4);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
	cursor: pointer;
	transition: all 0.6s ease;
	&:hover {
		background: linear-gradient(135deg, #5b7de2, #05E82E);
		box-shadow: 0 4px 12px rgba(65, 101, 215, 0.6);
	}
}
/* 抽屉内容样式 */
:deep(.el-drawer__header) {
	margin-bottom: 0;
	padding: 16px 20px;
	background: linear-gradient(135deg, #4165d7, #5b7de2);
	color: white;
	border-bottom: 1px solid #e4e7ed;
}

:deep(.el-drawer__title) {
	color: white;
	font-weight: bold;
	font-size: 18px;
}

:deep(.el-drawer__body) {
	padding: 0;
}

.drawer-content {
	padding: 20px;
	line-height: 1.8;
	color: #303133;
	font-size: 16px;
	height: 100%;
	overflow-y: auto;
}

/* 关闭图标样式 */
.close-icon {
	position: fixed;
	top: 20px;
	right: 20px;
	background: linear-gradient(135deg, #4165d7, #5b7de2);
	color: white;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1000;
	box-shadow: 0 2px 8px rgba(65, 101, 215, 0.4);
	transition: all 0.3s ease;

	&:hover {
		transform: rotate(90deg);
		background: linear-gradient(135deg, #3555c4, #4b6dd2);
		box-shadow: 0 4px 12px rgba(65, 101, 215, 0.6);
	}

	:deep(.el-icon) {
		font-size: 20px;
	}
}
</style>
